<template>
    <div class="z-zuti">
        <div class="z-beijin">
            <img src="https://www.codelover.club/static/img/mycoursebg.c42996a9.png" alt="" class="z-diyi">
            <img src="https://www.codelover.club/icons/user/icon4.png" alt="" class="z-dier">
            <div class="z-text">大学生</div>
        </div>
        <div class="z-zujianku">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px">
    <el-radio-button value="top">学习</el-radio-button>
  </el-radio-group>
  <el-tabs :tab-position="tabPosition" style="height: 100%; width: 100%;" class="demo-tabs">
    <el-tab-pane label="正在进行">
        <el-space wrap :size="40">
                                    <Card v-for="item in useData.theHome" :name="item.name" :desc="item.currDesc"
                                        :img="item.iconPath" :time1="item.startTeachingTime"
                                        :time2="item.startTeachingTime" :id="item.currNo" />
                                </el-space>
    </el-tab-pane>
    <el-tab-pane label="已完成">无已完成</el-tab-pane>
  </el-tabs>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import useDataStore from "../stores/Data";
const useData = useDataStore()
onMounted(() => {
    useData.getHomeData()
})
import Card from '../components/Card.vue';
import type { TabsInstance } from 'element-plus';
const tabPosition = ref<TabsInstance['tabPosition']>('top') // 将初始值改为'top'
</script>

<style>
.z-diyi{
    position: absolute;
    top: 10%;
    left: 0%;
    width: 100%;
}
.z-dier{
    position: absolute;
    top: 12%;
    left: 15%;
    width: 8%; /* 增加宽度 */
    height: auto; /* 高度自动，以保持宽高比 */
}
.z-text{
    position: absolute;
    top: 20%;
    left: 23%; /* 调整左边距，确保文本显示在图片右侧 */
    font-size: 1.1em; /* 根据需要调整字体大小 */
    color: white;
    background-color: rgb(186, 164, 19); /* 添加黄色背景 */
    padding: 5px 10px; /* 增加内边距 */
    border-radius: 5px; /* 可选，添加圆角 */
}
.z-beijin img {
    height: auto; /* 维持图片的原始宽高比 */
}
.demo-tabs {
    height: 200px;
    width: 1500px;
    overflow: auto; /* 允许滚动 */
    scrollbar-width: none; /* 隐藏滚动条 */
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
.z-zujianku {
position: absolute;
top: 35%;
    left: 5%;
}
</style>